<template>
    <div class="media">
        <div class="img"></div>
        <el-menu @select="handleSelect" class="menu">
            <el-menu-item index="1" class="item1">行业质讯</el-menu-item>
            <el-menu-item index="2" class="item2">跨界活动</el-menu-item>
        </el-menu>
        <div>
            <ul class="ul" v-for="item in media.slice(0, 3)" :key="item.src">
                <li>
                    <div class="left">
                        <a href="">{{ item.title }}</a>
                        <p>{{ item.tiem }}</p>
                        <p>{{ item.title }}</p>
                    </div>
                    <img :src="item.src" alt="" />
                </li>
            </ul>
        </div>
        <el-pagination background layout="prev, pager, next"> </el-pagination>
    </div>
</template>

<script>
export default {
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
    },
    data() {
        return {
            media: [
                {
                    title: "REMICONE冰淇淋&鲜奶店，感恩有礼",
                    tiem: "2019-11-27",
                    src: require("../assets/UYupf0kBSr-DUvyXF9z6SQ.jpg"),
                },
                {
                    title: "REMICONE三店齐开 | 也没什么事，就是想送你胶囊杯！",
                    tiem: "2019-11-27",
                    src: require("../assets/M-USsaHuSuut4TzL-PqKQA.jpg"),
                },
                {
                    title: "恶魔炸弹冰淇淋 | 万圣怪诞夜，测测你是什么鬼？",
                    tiem: "2019-10-31",
                    src: require("../assets/10gV4SgrTPirfnii50BvOQ.jpg"),
                },
                {
                    title: "REMICONE冰淇淋庆十一丨胶囊鲜奶杯来了！送你超级超级超级多的大惊喜！",
                    tiem: "2019-10-01",
                    src: require("../assets/_ohEJaNmSEOfsRMShI0jIQ.jpg"),
                },
                {
                    title: "REMICONE冰淇淋庆十一丨胶囊鲜奶杯来了！送你超级超级超级多的大惊喜！",
                    tiem: "2019-10-01",
                    src: require("../assets/_ohEJaNmSEOfsRMShI0jIQ.jpg"),
                },
                {
                    title: "REMICONE十一新品丨椰椰玉米浓牛乳，是温暖与热切",
                    tiem: "2019-09-30",
                    src: require("../assets/DjCdoSZ6St-BjfnkCTQ18w.jpg"),
                },
                {
                    title: "新店丨REMICONE冰淇淋5店齐开，乌云粉们约啦！",
                    tiem: "2019-06-27",
                    src: require("../assets/01.jpg"),
                },
                {
                    title: "REMICONE新品|小茉绿系列，尝尝香茅的味道",
                    tiem: "2019-06-21",
                    src: require("../assets/02.jpg"),
                },
                {
                    title: "REMICONE新品丨我敢保证，这支美人鱼冰淇淋，你从没吃过",
                    tiem: "2019-05-06",
                    src: require("../assets/03.jpg"),
                },
                {
                    title: "REMICONE冰淇淋新店|觅食森林，我在西单遇见你",
                    tiem: "2019-03-29",
                    src: require("../assets/04.jpg"),
                },
                {
                    title: "引领时尚个性的国际甜品潮牌REMICONE冰淇淋强势入驻BFE",
                    tiem: "2019-03-19",
                    src: require("../assets/01.png"),
                },
                {
                    title: "REMICONE樱の系列超“甜”新品，27岁的仙女结什么婚？",
                    tiem: "2019-03-05",
                    src: require("../assets/05.jpg"),
                },
                {
                    title: "REMICONE乌云冰淇淋入驻中国一周年！2017年做一个有性格的冰淇淋品牌",
                    tiem: "2016-12-12",
                    src: require("../assets/06.jpg"),
                },
                {
                    title: "REMICONE乌云冰淇淋在消费者心中是一个怎样的冰淇淋品牌",
                    tiem: "2016-6-10",
                    src: require("../assets/07.jpg"),
                },
                {
                    title: "REMICONE乌云冰淇淋品牌加盟店如何？",
                    tiem: "2016-4-08",
                    src: require("../assets/08.jpg"),
                },
                {
                    title: "冰淇淋店要怎么开？REMICONE乌云冰淇淋告诉大家经营方法",
                    tiem: "2016-4-07",
                    src: require("../assets/09.jpg"),
                },
            ],
            activity: [
                {
                    title: "REMICONE乌云冰淇淋和电影《攀登者》强强联合，推出联名款珠峰冰淇淋",
                    tiem: "2019-09-29",
                    src: "../ice211/src/assets/10.jpg",
                },
                {
                    title: "REMICONE x《 白蛇 缘起》丨电影票30份，送你！",
                    tiem: "2019-01-09",
                    src: "../ice211/src/assets/11.jpg",
                },
                {
                    title: "罗小黑 x REMICONE乌云冰淇淋丨来尝尝这杯五十度【黑】",
                    tiem: "2018-09-28",
                    src: "../ice211/src/assets/12.jpg",
                },
                {
                    title: "REMICONE x 举杯呵呵喝丨给你讲故事，同你说道理",
                    tiem: "2018-09-14",
                    src: "../ice211/src/assets/12.jpg",
                },
                {
                    title: "REMICONE x 举杯呵呵喝丨给你讲故事，同你说道理",
                    tiem: "2018-09-14",
                    src: "../ice211/src/assets/13.jpg",
                },
                {
                    title: "深圳首届食上嘻哈，REMICONE乌云冰淇淋空降现场陪你一起嗨",
                    tiem: "2017-12-04",
                    src: "../ice211/src/assets/14.jpg",
                },
                {
                    title: "REMICONE x 摩拜单车 | 大家好，给大家介绍一下，这是我的新月卡",
                    tiem: "2017-10-14",
                    src: "../ice211/src/assets/15.jpg",
                },
                {
                    title: "REMICONE乌云冰淇淋 x CONVERSE | 神秘新品助力匡威潮趴",
                    tiem: "2017-7-13",
                    src: "../ice211/src/assets/16.jpg",
                },
                {
                    title: "TeamLab x Remicone | 我是一个懂艺术的健康软冰",
                    tiem: "2017-07-07",
                    src: "../ice211/src/assets/17.jpg",
                },
            ],
        };
    },
};
</script>

<style lang="scss" scoped>
.ul {
    display: flex;
    justify-content: center;
    li {
        img {
            width: 420px;
            height: 252px;
        }
        .left {
            margin-top: 10px;
            a {
                font-size: 18px;
                font-weight: bold;
                color: #222;
                text-decoration: none;
                margin-left: 21px;
                margin-top: 10px;
            }
            p {
                margin-left: 21px;
                text-align: left;
            }
            .span {
                text-align: left;
            }
        }
        width: 1200px;
        height: 252px;
        color: #707070;
        margin: 0px 0px 25px;
        background: #fff;
        list-style: none;
        display: flex;
        justify-content: space-between;
    }
}

.media {
    background-image: url("../assets/xfsd.png");
    .img {
        background: url("../assets/yuyu6.jpg");
        width: 1920px;
        height: 380px;
    }
    .menu {
        display: flex;
        justify-content: center;
        .item1,
        .item2 {
            color: #707070;
            width: 150px;
            height: 42px;
            margin: 10px;
            padding: 7px 10px;
            font-size: 12px;
            border: 1px solid black;
            text-align: center;
            line-height: 23px;
            border-radius: 42px;
        }
    }
}
</style>